<template>
    <div class="comment-post-container">
        <van-field
            v-model="message"
            autosize
            border
            type="textarea"
            maxlength="50"
            placeholder="请输入留言"
            show-word-limit
        >
        </van-field>
        <van-button class="postBtn" size="small" round @click="onPost" :disabled="isDisabled">发布</van-button>
    </div>
</template>

<script>
import { addComment } from '@/api/comment'
    export default {
        name: 'commentPost',
        props:{
            target:{
                type: [String, Number, Object],
                required: true
            },
            articleId:{
                type: [String, Number, Object],
                default: null
            }
        },
        data() {
            return {
                message: '', //输入的内容
                isDisabled: false, //判断是否为不可点击状态
            }
        },
        methods: {
            async onPost(){
                this.isDisabled = true
                const { data } = await addComment({
                    target: this.target.toString(),  //评论的目标id（评论文章即为文章id，对评论进行回复则为评论id）
                    content: this.message, //评论内容
                    art_id: this.articleId ? this.articleId.toString() : null,  //文章id，对评论内容发表回复时，需要传递此参数，表明所属文章id。对文章进行评论，不要传此参数。
                })
                // 触发一个  post 方法，传递新添加的数组对象给父组件调用
                this.$emit('post',data.data.new_obj)
                this.isDisabled = false
                this.$toast.success('发布成功');

            }
        },
    }
</script>

<style lang="less" scoped>
.comment-post-container{
    display: flex;
    justify-content: center;
    align-items: center;
    .postBtn{
       width: 60px;
       font-size: 13px;
       margin-right: 5px;
    }
}
</style>